<template>
    <div>
        <div>vant ui 组件的上传功能</div>
        <van-uploader
                v-model="files"
                :max-count="5"
                accept="/*"
                :before-read="beforeRead"
                :after-read="onUpload"
                @click-upload="uploadImg"
                multiple
        >
            <template #default>
                <div v-if="loading">loading</div>
                <div v-else
                        class="van-image w-80px h-80px"
                        border-dashed
                        border-1

                        rounded-md
                        border-light-8
                     style="display: flex;justify-content: center;align-items: center"
                >
                    <div>
                        <van-loading />
                    </div>
                </div>
            </template>

            <template #preview-cover="{ file }" >
<!--                123-->
<!--                <div style="width: 100%;height: 100%;" @click="selfClick(file)"></div>-->
            </template>

        </van-uploader>
    </div>
</template>

<script  setup>
    // import {useAttrs,ref, reactive, defineProps, defineComponent, defineEmits, defineExpose, onMounted} from 'vue'

    let files = ref([
        {},{}
    ]);
    let loading = ref(true);

    const beforeRead = (file) => {
        // const type = props.type === '0' ? file.type : `${file.name.split('.').pop()}`;
        // if (props.type === '0' && !accept.value.includes(type)) {
        //     showToast('图片上传格式错误');
        //     return false;
        // }
        // const doctype = Object.keys(docType).join(',');
        // if (props.type === '2' && !doctype.includes(type)) {
        //     showToast('文件上传格式错误');
        //     return false;
        // }
        // if (file.size / 1024 / 1024 > limitSize) {
        //     showToast(`文件过大，请重新选择`);
        //     return false;
        // }
        return true;
    };
    // 附件上传
    const onUpload = async (uploader) => {
        loading.value=false
        console.log("uploader",uploader)
        console.log("files",files)
        uploader.status = 'uploading'
        uploader.message = '上传中...'
        uploader.urls = "123456"
        setTimeout(()=>{
            uploader.status = ""
            loading.value=true
        },2000)
        // console.log(uploader.file);
        // const url = await uploadFile(uploader.file);
        // if (!url) return;
        // fileType = url ? url.split('.')?.pop().toLowerCase() : '';
        // files = url ? [{ url, name: uploader.file.name, size: uploader.file.size }] : [];
        // emit('update:modelvalue', files);
        // loading = false;
    };
    function uploadImg() {
        console.log("uploadImg")
        // if (props.type === '0') {
        //     useActionSheet({
        //         actions: [
        //             { name: '拍照', color: '#3399ff', type: 'camera' },
        //             { name: '选择照片', color: '#3399ff', type: 'album' },
        //         ],
        //         onOk: async (_, { type }) => {
        //             loading = true;
        //             const { code, data } = await takePhotoOrCamera({
        //                 mode: type,
        //                 count: 1,
        //             });
        //             if (+code === 0) {
        //                 const suffix = getBase64Extension(data[0].base64);
        //                 const transformData = dataURLtoBlob(data[0].base64 || data[0].str);
        //                 const transformSize = transformData.size;
        //                 const fileName = `${store.userId}${Date.now()}.${suffix}`;
        //                 if (!accept.value.includes(`image/${suffix}`)) {
        //                     showToast('上传格式错误');
        //                     return false;
        //                 }
        //                 if (transformSize / 1024 / 1024 > limitSize) {
        //                     showToast(`文件过大，请重新选择`);
        //                     return false;
        //                 }
        //                 const url = await uploadPic(fileName, transformData);
        //                 if (!url) return;
        //                 files = url ? [{ url, name: fileName, size: transformSize }] : [];
        //                 emit('update:modelvalue', files);
        //                 loading = false;
        //             } else if (+code === -1) {
        //                 showToast('上传失败，请检查APP相机或相册访问权限是否打开');
        //             }
        //         },
        //     });
        // }
    }

    const selfClick = (file)=>{
        console.log("selfClick",file)
        console.log("files",files)
    }
    onMounted(()=>{
         console.log("onMounted")
    })

</script>

<style scoped>

</style>